<template>
  <div>
    <van-divider>个人信息</van-divider>
    <!-- <van-button @click="play">play</van-button>
    <van-button @click="start">start</van-button>
    <van-button @click="stop">stop</van-button> -->
    <van-field style="padding: 10px" v-model="profile.username" label="用户名" readonly />
    <van-field style="padding: 10px" v-model="profile.nickName" label="昵称" readonly ></van-field>
    <van-divider dashed="true" hairline="true" content-position="left">头像</van-divider>
    <van-row type="flex" justify="space-between">
      <van-col align="center" style="margin: 0 20px;">
        <van-image
          fit="cover"
          :src="this.avatarUrl"
        />
      </van-col>
    </van-row>
    <van-row type="flex" justify="center" style="padding: 20px">
      <van-col span="24" align="center"><van-button @click="logout" style="width: 90%; margin: 5px;" type="danger" block="true" round>退出</van-button></van-col>
    </van-row>
    <keep-alive>
      <TabBar/>
    </keep-alive>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TabBar from '../components/TabBar.vue';
import Recorder from 'js-audio-recorder';
let recorder = new Recorder();
export default {
  data() {
    return {
      username: "fangzheng",
      nickName: "fangzheng",
      img: "https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg"
    };
  },
  mounted: function() {
    let userToken = this.$store.state.user.userToken;
    if(userToken == null) {
      this.$router.push({path: "/login"});
    }
    let token = this.$store.state.user.userToken;
    this.$store.dispatch("user/getProfile", {
      userToken: token
    });
    // console.log("profile userToken: " + this.$store.state.user.userToken)
  },
  computed: {
    ...mapGetters({
      profile: "user/getProfile",
      avatarUrl: "user/getAvatarUrl"
    }),
  },
  methods: {
    logout(event) {
      let store = this.$store;
      store.dispatch("user/logout");
    },
    start() {
      recorder.start();
    },
    play() {
      recorder.play();
    },
    stop() {
      recorder.stop();
      recorder.downloadWAV();
    }
  },
  components: {
    TabBar
  }
};
</script>

<style lang="css" scoped>
</style>
